<template>
    <!-- <template v-if="!treeData.meta?.isHidden && treeData.beShow == 1"> -->
    <template v-if="!treeData.meta?.isHidden">
        <a-sub-menu
            :key="key"
            v-if="treeData.children && treeData.children.length > 0"
            :class="key"
            popupClassName="page-header-sub-menu"
        >
            <template #icon>
                <div>
                    <img class="logo" :src="getIconUrl(icon)" alt="" />
                    <img
                        class="active-logo"
                        :src="getIconUrl(treeData.meta.iconActive)"
                        alt=""
                    />
                </div>
            </template>
            <template #title>
                <span>
                    {{ treeData?.name || treeData?.meta?.title }}
                    <CaretDownOutlined
                        class="arrow"
                        v-if="treeData.children && treeData.children.length > 0"
                    />
                </span>
            </template>

            <SliderSubMenu
                v-for="item in treeData.children"
                :tree-data="item"
                :parentPath="
                    parentPath
                        ? parentPath == treeData.path
                            ? treeData.path
                            : `${parentPath}/${treeData.path}`
                        : ''
                "
                :isFirstDepth="false"
            />
        </a-sub-menu>
        <a-menu-item
            :key="key + ''"
            v-else
            @click="hdlGoPage(key)"
            :data-only="
                (!treeData.children || treeData.children.length == 0) &&
                isFirstDepth
            "
            :class="key"
        >
            <template #icon v-if="parentPath == treeData.path">
                <div>
                    <img class="logo" :src="getIconUrl(icon)" alt="" />
                    <img
                        class="active-logo"
                        :src="getIconUrl(treeData.meta.iconActive)"
                        alt=""
                    />
                </div>
            </template>
            {{ treeData?.name || treeData?.meta?.title }}
        </a-menu-item>
    </template>
</template>

<script setup lang="ts">
    import { computed, inject, onMounted, ref, toRefs, watch } from "vue";
    import { useRouter, useRoute } from "vue-router";
    import { CaretDownOutlined } from "@ant-design/icons-vue";
    const router = useRouter();
    const route = useRoute();
    const props = defineProps<{
        treeData: any;
        parentPath: string;
        isFirstDepth?: boolean;
    }>();
    const getIconUrl = (name: string) => {
        let url = new URL(`../../../../assets/${name}.png`, import.meta.url)
            .href;
        return url;
    };
    const selectedKeys = inject("selectedKeys") as any;
    const { treeData, parentPath } = toRefs(props);
    const key = computed(() => {
        return parentPath.value == treeData.value.path
            ? `${
                  treeData.value.path.includes("/")
                      ? treeData.value.path
                      : "/" + treeData.value.path
              }`
            : `/${parentPath.value}/${treeData.value.path}`;
    });

    const hdlGoPage = (path: string) => {
        router.push(path);
    };

    const icon = ref(treeData.value.meta.iconNotActive);
    watch(
        () => selectedKeys.value[0],
        (newVal, oldVal) => {
            let index0 = newVal?.lastIndexOf("/");
            let index1 = oldVal?.lastIndexOf("/");
            let prefix0 = newVal?.slice(0, index0);
            let prefix1 = oldVal?.slice(0, index1);

            if (index0 == index1 && prefix0 == prefix1) {
                return;
            }

            if (newVal != oldVal) {
                let pathname = newVal;
                if (pathname) {
                    let path = pathname.replace(/\?.*/g, "");
                    path = path.replace(/\$\{.\}/g, "");
                    if (path.includes(key.value)) {
                        icon.value = treeData.value.meta.iconActive;
                        return;
                    }
                    icon.value = treeData.value.meta.iconNotActive;
                }
            }
        },
        { immediate: true },
    );
</script>

<style lang="scss" scoped src="./SliderSubMenu.scss"></style>
